<template>
    <div>
        <div class="container">
            <div class="select" @click="selectPosition">
                <!-- <img src="../assets/position-white.png" class="position-img "> -->
                <i class="el-icon-location"></i>
                <input type="text" name="select" id="select" v-model="selectValue">
                <i class="el-icon-caret-bottom"></i>
                <!-- <img src="../assets/arrow-white.png" class="arrow-img"> -->
            </div>
            <ul class="option" v-if="optionVisible">
                <li @click="getOption(item.value)" v-for="item in option" :key="item.value">{{item.value}}</li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup () {
        let selectValue = ref('青海省')
        let optionVisible = ref(false)
        function getOption(value:string){
            selectValue.value = value
            optionVisible.value = false
        }
        function selectPosition(){
            optionVisible.value = !optionVisible.value
        }
        return {
            selectValue,
            optionVisible,
            option:[{value:'青海省'},{value:'西宁市'},{value:'海东市'},{value:'海南州'},{value:'海北州'},],
            getOption,
            selectPosition
        }
    }
})
</script>

<style scoped lang="scss">
.container{
    margin: 0 10px;
    height: 26px;
    width: 190px;
    position: relative;
    .select {
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        background: #181818;
        padding: 0 4px;
        .el-icon-location{
            font-size: 14px;
        }
        .position-img{
            width: 14px;
            height: 14px;
        }
        .arrow-img{
            width: 12px;
            height: 12px;
        }
        input{
            width: 100%;
            background: #181818;
            color: #adb0b8;
            border: none;
            padding: 6px 4px;
            outline: none;
            font-size: 12px;
        }
        input:hover{
            color: #fff;
        }
    }
    .select:hover{
        color: #fff;
    }
    .option{
        width: 190px;
        box-sizing: border-box;
        background: #181818;
        padding: 6px 0px;
        position: absolute;
        top: 26px;
        left: 0;
        li{
            padding:6px 0 6px 22px;
            color: #adb0b8;
        }
        li:hover{
            cursor: pointer;
            background: #282b33;
            color: #fff;
        }
    }
    
}
</style>